<template>
  <div>
    <el-container style="height: 600px;">
    <el-header style="text-align: right; font-size: 12px">

      <el-breadcrumb separator="/" style=" width: 500px;float: left;height:60px ;line-height: 60px">
        <el-breadcrumb-item :to="{ path: '/studentInfo' }"><strong style="cursor: pointer">首页</strong></el-breadcrumb-item>

      </el-breadcrumb>
      <el-button @click="insertClass" style="text-align: left;" >新增</el-button>
      <el-dropdown>
        <span style="cursor: pointer">{{this.$store.state.empName}}<i class="el-icon-arrow-down el-icon--right" style="cursor: pointer"></i></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item ><span @click="roleBiao">个人信息</span></el-dropdown-item>
          <el-dropdown-item ><span @click="loginOut()">退出</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

    </el-header>

    <!--    搜索框-->
    <div style="margin: 15px">
      <!--      班级名称-->
      <span style="float: left;text-align: center;align-content: center;height: 40px;line-height: 40px">班级名称&nbsp;</span>
      <el-input v-model="heban.className" placeholder="班级名称"style="width: 10%;float: left"></el-input>
      <!--      班级状态-->
      <span style="float: left;text-align: center;align-content: center;height: 40px;line-height: 40px">班级状态&nbsp;</span>
      <el-select v-model="heban.clsStatus" placeholder="班级状态" style="width: 10%;float: left">
        <el-option label="正常" value="1"></el-option>
        <el-option label="已合班" value="2"></el-option>
        <el-option label="已就业" value="3"></el-option>
      </el-select>
      <el-button @click="searchClass()" style="float: left" type="primary" icon="el-icon-search">搜索</el-button>
      <el-button @click="getClass()" style="float: left;align-content: center" icon="el-icon-refresh">重置</el-button>
    </div>
      <!--  表数据-->
      <el-main>
      <el-table :data="page.records" border stripe>
        <el-table-column prop="classId" label="班级编号"></el-table-column>
        <el-table-column prop="className" label="班级名称"></el-table-column>
      <el-table-column prop="createTime" label="开班时间" ></el-table-column>
        <el-table-column prop="headmaster" label="班主任"></el-table-column>
        <el-table-column prop="instructor" label="教员" ></el-table-column>
        <el-table-column prop="employmentGuide" label="就业老师" ></el-table-column>
        <el-table-column prop="clsStatus" label="班级状态" >
          <template slot-scope="scope">
            <span>{{showStatus(scope.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注"></el-table-column>
        <el-table-column prop="操作" label="操作">
          <template slot-scope="scope">
            <a href="#" @click="updateClass(scope.row)">修改</a>
            <a href="#" @click="deleteClass(scope.row)">删除</a>
          </template>
        </el-table-column>

      </el-table>
    </el-main>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[5, 8, 10, 12]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>
<!--    新增弹窗-->
        <el-dialog
          title="操作班级"
          :visible.sync="insertClass1"
          width="50%"
          :before-close="handleClose"
            >
          <span>班级名称:<span v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></span></span>
    <el-input v-model="classes.className" placeholder="班级名称" style="width: 500px"></el-input>
         <br><br>
          <div class="block">

            <span class="demonstration">开班时间:<span v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></span></span>
            <el-date-picker
              v-model="classes.createTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="开班时间:"
              style="width: 500px">
            </el-date-picker>
          </div>
          <br>
          <span>班主任:<span v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></span></span>
    <el-input v-model="classes" placeholder="班主任" style="width: 500px"></el-input><br><br>
          <span>教员:<span v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></span></span>
    <el-input v-model="classes.instructor" placeholder="教员" style="width: 500px"></el-input><br><br>
          <span>就业老师:<span v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></span></span>
    <el-input v-model="classes.employmentGuide" placeholder="就业老师" style="width: 500px"></el-input><br><br>
          <span>班级状态:<span v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></span></span>
    <el-select v-model="classes.clsStatus" placeholder="班级状态" style="width: 500px">
            <el-option label="正常" value="1">正常</el-option>
            <el-option label="已合班" value="2">已合班</el-option>
            <el-option label="已就业" value="3">已就业</el-option>
    </el-select>
    <br><br>
          <span>备注:<span v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></span></span>
    <el-input v-model="classes.remarks" placeholder="备注" style="width: 500px"></el-input><br><br>
    <el-button type="success" @click="commit">提交</el-button>
    <el-button type="danger" @click="cancel">取消</el-button>
        </el-dialog>

    </el-container>
  </div>
</template>

<script>
import instance from "../../utils/request";
//引入axios实例
export default {
  name: "Classes",

  data(){
    return{
      page: {//页面对象
        current:1,//当前页码
        size:5,//页面大小
        total:0,//数据总条数
        records:{}//数据
      },
      input: '',
      classes:{},
      insertClass1:false,//对话框显示
      value1:'',
      heban:{}//条件对象

    }
  },
  methods: {
    showStatus(row,column){
      let clsStatus='';
      switch (row.clsStatus){
        case 1:
          return '正常'
        case 2:
          return '已合班'
        case 3:
          return '已就业'
      }
      return clsStatus;
    },
    searchClass(){
      //按条件查询获取班级信息分页形式
      this.heban.current = this.page.current;
      this.heban.pageSize = this.page.size;
      instance.post("/classes/heban",this.heban).then(res => {
        this.page = res.data;//查询数据并赋值
      });
    },

    commit() {//提交
      //提交到后台
      instance.post("/classes", this.classes).then(res => {
        if (res.data > 0) {//受影响行数>0表示成功
          alert("保存成功!");
          this.getClass();
          this.$router.push({name: "Classes"});//切换到主页
          this.getClass();//重新加载班级信息
        }
       this.insertClass1=false;
      });
    },
    cancel() {//取消
      this.insertClass1=false;
      this.$router.push({name: "Classes"});//切换到主页

    },
    handleClose(done) {//X关闭对话框
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    insertClass(){//添加
      this.classes = {};
      this.insertClass1=true;

    },
     handleSizeChange(val) {//分页控件 改变页面大小时执行
      this.page.size = val;
       if (Object.keys(this.heban).length == 0){
         this.getClass();
       }else {
         this.searchClass();
       }
    },
    handleCurrentChange(val) {//分页控件 改变当前页码时执行
      this.page.current = val;
      if (Object.keys(this.heban).length == 0){
        this.getClass();
      }else {
        this.searchClass();
      }
    },
    updateClass(row){//修改班级
      this.classes.classId=row.classId;
      instance.get("/classes/"+row.classId).then(res=>{
        this.classes = res.data;
      });
      this.insertClass1 = true;
      this.getClass();
    },
    deleteClass(row) {//删除班级
      instance.delete("/classes/"+row.classId).then(res=>{
        if (res.data>0){
          this.$message("删除班级信息成功!");
          this.getClass();
          this.$router.push({name:'Classes'});
        }else {
          this.$message("删除班级信息失败!");
          this.getClass();
        }
      });
      this.getClass();//重新加载班级信息
    },
    getClass(){
      this.heban = {};//清空条件
      //获取所有班级信息分页形式
      instance.get("/classes/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page = res.data;//查询数据并赋值
      });
    },
    roleBiao(){
      this.$router.push({name:'Role'})//跳转到角色
    },
    loginOut(){//退出登录
      instance.get("/user/logout");
      location.reload();
    }
  },


  created() {//使用该组件时执行
    this.getClass();
    if (this.$store.state.roleId == 0){
      this.$message('请先登录');
      this.$router.push({name:'Login'});
    }
  }

}




</script>

<style scoped>

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
a {
  color: #42b983;
}
.el-dropdown {
  vertical-align: top;
}
</style>
